/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class='container'>
    <TabBarContainerVue>
      <TabBarContentVue>
        <div class='main-content' :style='{ paddingTop: `${topAvoidArea}px` }'>
          <!-- 顶部导航搜索栏 -->
          <CustomTab></CustomTab>

          <!-- 横屏轮播图 -->
          <div v-if="currentBp === 'sm' || currentBp === 'xs'">
            <swiper :options='swiperOptions' ref='mySwiper'>
              <swiper-slide v-for='(image, index) in images' :key='index'>
                <img :src='image.uri' class='carousel-image' />
              </swiper-slide>
              <div class='swiper-pagination' slot='pagination'></div>
            </swiper>
          </div>
          <div v-if="currentBp === 'md' || currentBp === 'lg'">
            <swiper key='21321' :options='swiperOptionsLong' ref='mySwiper2'>
              <swiper-slide
                v-for='(image, index) in images'
                :key='index'
                class='swiper-slide'
              >
                <img
                  :src='image.uri'
                  class='carousel-image'
                  :style='mdSwiperStyle'
                />
              </swiper-slide>
            </swiper>
          </div>
          <div v-if="currentBp === 'xl'">
            <swiper
              key='21323241234'
              :options='swiperOptionsLong'
              ref='mySwiper4'
            >
              <swiper-slide
                v-for='(image, index) in images'
                :key='index'
                class='swiper-slide'
              >
                <img
                  :src='image.uri'
                  class='carousel-image'
                  style='width: 510px; height: 220px'
                />
              </swiper-slide>
            </swiper>
          </div>
          <div class='entrances-centent'>
            <swiper :options='swiperOptionsLong' ref='mySwiper3'>
              <swiper-slide
                v-for='(image, index) in entrances'
                :key='index'
                class='swiper-slide'
              >
                <div
                  class='entrances'
                  :style='{ paddingRight: entrancesPadding }'
                >
                  <img :src='image.uri' class='entrances-image' />
                  <div class='entrances-text'>{{ image.name }}</div>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 网格 -->
          <MultiGridVue
            :columnsTemplate='columnsTemplate'
            gridColumnGap='20px'
            gridRowGap='12px'
            style='height: auto'
          >
            <div v-for='item in data' :key='item.id'>
              <div class='item-container'>
                <img
                  src='../../assets/videoList/images/image1.png'
                  style='width: 100%'
                />
                <div class='text-overlay'>
                  <div class='top-left'>正片</div>
                  <div class='bottom-right'>9.0</div>
                </div>
              </div>
              <div class='item-content'>
                <div class='common-text item-title'>{{ '这是超人的水准' }}</div>
                <div class='common-text item-subtitle'>
                  {{ '中秋节端午节重阳节泼水节节日快乐节日快乐' }}
                </div>
              </div>
            </div>
          </MultiGridVue>
        </div>
      </TabBarContentVue>
      <TabBarVue :bgColor="'#F1F3F5'" :height='barHeight' :width='barWidth'>
        <TabBarItemVue v-for='(title, index) in tabBarData' :key='index'>
          <div class='tab-button' :style='{ marginBottom: `${bottomAvoidArea}px` }'>
            <img class='bottom-img' :src='title.uri' />
            <span :class="index === 0 ? 'bottom-title-active' : 'bottom-title'">
              {{ title.name }}
            </span>
          </div>
        </TabBarItemVue>
      </TabBarVue>
    </TabBarContainerVue>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue';
import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';
import {
  TabBarContainerVue,
  TabBarContentVue,
  TabBarVue,
  TabBarItemVue,
} from '@hadss/web_adaptive_layout_vue2';
import { data, images, entrances, tabBarData } from '@/views/VideoList/mockData';
import CustomTab from '@/views/VideoList/CustomTab.vue';
import { MultiGridVue } from '@hadss/web_adaptive_layout_vue2';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import { AvoidArea, AvoidAreaInfo, AvoidAreaType } from '@/common/windowCommon';

let showSwiper = true;
let entrancesPadding = '38px';
const breakpointManager = new BreakpointManager();

export default Vue.extend({
  components: {
    TabBarContainerVue,
    TabBarContentVue,
    TabBarVue,
    TabBarItemVue,
    MultiGridVue,
    CustomTab,
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      statusBarHeight: 50,
      isAndroid: navigator.platform.toLowerCase().includes('android'),
      currentBp: 'unknown',
      mdSwiperStyle: { width: `${window.innerWidth / 2 - 50}px` },
      text: '',
      data,
      images,
      entrances,
      tabBarData,
      containerPadding: 16,
      itemGap: 8,
      breakpointManager: new BreakpointManager(),
      sidebar_visiable: false,
      vertical: {
        sm: true,
        md: false,
      },
      barPosition: {
        sm: 'end',
        md: 'start',
      },
      columnsTemplate: {
        sm: '1fr 1fr',
        md: '1fr 1fr 1fr',
        lg: '1fr 1fr 1fr 1fr',
      },
      barHeight: {
        sm: '56px',
        md: '48px',
        lg: '100%'
      },
      barWidth: {
        md: '100%',
        lg: '96px'
      },
      showSwiper: showSwiper,
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets',
        },
        loop: true,
        autoplay: false,
        slidesPerView: 1,
        spaceBetween: 30,
        effect: 'slide',
        speed: 500,
        resistance: true,
        resistanceRatio: 0.85,
      },
      swiperOptionsLong: {
        direction: 'horizontal',
        autoplay: false,
        loop: false,
        slidesPerView: 'auto',
        freeMode: true,
        grabCursor: true,
        mousewheel: {
          forceToAxis: true,
        },
        resistanceRatio: 0,
        scrollbar: {
          el: '.swiper-scrollbar',
          draggable: true,
        },
      },
      entrancesPadding: '38px',
      topAvoidArea: 0,
      bottomAvoidArea: 0
    };
  },
  mounted() {
    this.currentBp = this.breakpointManager.getCurrentBreakpoint();
    this.handleResize();
    if ((window as any).webClass) {
      const webClass = (window as any).webClass;
      const topArea = webClass.getAvoidArea(AvoidAreaType.TYPE_SYSTEM) as AvoidArea;
      const bottomArea = webClass.getAvoidArea(AvoidAreaType.TYPE_NAVIGATION_INDICATOR) as AvoidArea;
      this.topAvoidArea = webClass.pxToVp(topArea.topRect.height);
      this.bottomAvoidArea = webClass.pxToVp(bottomArea.bottomRect.height);
      this.barHeight = {
        'sm': `${56 + this.bottomAvoidArea}px`,
        'md': `${48 + this.bottomAvoidArea}px`,
        'lg': '100%'
      };
    }
    window.addEventListener('resize', this.handleResize);
    window.addEventListener('avoidAreaChange', this.handleAvoidAreaChange);
  },
  beforeDestroy() {
    this.unsubscribe();
    window.removeEventListener('resize', this.handleResize);
    window.removeEventListener('avoidAreaChange', this.handleAvoidAreaChange);
  },
  methods: {
    unsubscribe: breakpointManager.subscribeToBreakpoint(() => {
      showSwiper = breakpointManager.useBreakpointValue({
        sm: true,
        md: false,
        lg: false,
      }) as boolean;
      entrancesPadding = breakpointManager.useBreakpointValue({
        sm: '38px',
        md: '65px',
        lg: '100px',
      }) as string;
    }),
    handleResize() {
      this.currentBp = this.breakpointManager.getCurrentBreakpoint();
      this.showSwiper = showSwiper;
      this.entrancesPadding = entrancesPadding;
      this.mdSwiperStyle = { width: `${window.innerWidth / 2 - 50}px` };
    },
    handleAvoidAreaChange(event: any) {
      const data = event.detail as AvoidAreaInfo;
      const areaType = data.type;
      if (areaType === AvoidAreaType.TYPE_SYSTEM) {
        this.topAvoidArea = (window as any).webClass?.pxToVp(data.area.topRect.height);
      }
      if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        this.bottomAvoidArea = (window as any).webClass?.pxToVp(data.area.bottomRect.height);
        this.barHeight = {
          sm: `${56 + this.bottomAvoidArea}px`,
          md: `${48 + this.bottomAvoidArea}px`,
          lg: '100%'
        };
      }
    }
  },
});
</script>

<style lang='less' scoped>
@import './index.less';
</style>
